<template>
	<view class="login">
		<view class="form_box">
			<view class="form_bo_wrap">
				<view class="Editorial">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<!-- <u-form-item label="开始时间" borderBottom ref="item1" labelWidth="80"
							@click="showDatetimePicker">
							<u--input v-model="model1.userInfo.startTime" placeholder="请输入课时开始时间" border="none"></u--input>
						</u-form-item> -->

						<!-- <u-form-item label="结束时间" borderBottom ref="item1" labelWidth="80"
							@click="showDatetimePicker2">
							<u--input v-model="model1.userInfo.endTime" placeholder="请输入课时结束时间" border="none"></u--input>
						</u-form-item> -->

						<u-form-item label="授课日期" borderBottom @click="open()" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.applyDate" disabledColor="#ffffff" placeholder="请选择授课日期" border="none"></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

						<u-form-item label="课时时长" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.classDuration" placeholder="请输入课时时长(小时)" border="none"></u--input>
						</u-form-item>

						 <u-form-item label="授课地点" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.locations" placeholder="请输入授课地点" border="none"></u--input>
						</u-form-item>

						<u-form-item label="预约人数" prop="userInfo.type" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.maxNum" placeholder="请输入最大预约人数" border="none"></u--input>
						</u-form-item>

						<u-form-item label="课时类型" borderBottom @click="showState = true; hideKeyboard()" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.stateName" disabledColor="#ffffff" placeholder="请选择课时类型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

						<u-form-item label="课时状态" borderBottom @click="showType = true; hideKeyboard2()" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.type" disabledColor="#ffffff" placeholder="请选择课时类型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

						<u-form-item label="课时内容" prop="userInfo.type" borderBottom ref="item1" labelWidth="80">
							<u--textarea v-model="model1.userInfo.content" placeholder="请输入课时内容" ></u--textarea>
						</u-form-item>

					</u--form>
					<u-button type="primary" text="提交" class="submit" @click="submit"></u-button>

					<u-action-sheet :show="showType" :actions="actions" title="请选择课时类型" @close="showType = false"
						@select="sexSelect">
					</u-action-sheet>
					<u-action-sheet :show="showState" :actions="actions2" title="请选择课时类型" @close="showState = false"
						@select="sexSelect2">
					</u-action-sheet>

					<!-- 日期选择 -->
					<u-datetime-picker :show="show1" v-model="value1" mode="datetime" closeOnClickOverlay @confirm="confirm"
						@cancel="cancel" @change="change" @close="close"></u-datetime-picker>

					<u-datetime-picker :show="show2" v-model="value2" mode="datetime" closeOnClickOverlay @confirm="confirm2"
					@cancel="cancel2" @change="change" @close="close2"></u-datetime-picker>
				</view>
			</view>
		</view>

		<!-- 日历 -->
		<view>
			<uni-calendar 
			ref="calendar"
			:insert="false"
			@confirm="confirm3"
			/>
		</view>
	</view>
</template>

<script>
import {saveClassHours, queryClassHoursInfo, updateClassHours} from '../../common/api'
export default {
	data() {
		return {
			curNow: 0,
			model1: {
				userInfo: {
					 startTime: '', //开始时间
					 endTime: '', //结束时间
					locations: '', //授课地点
					applyDate: '', //授课日期
					classDuration: '', //	课时时长（小时）
					maxNum: '', //最大预约人数
					type: '', //类型
					content: '', //课时内容
					stateName: '', //课时状态(0：已安排，1：进行中，2：已完成，3：已取消，4：已满员)
				},
			},
			showType: false,
			showState: false,
			actions: [
				{
					name: '理论课'
				},
				{
					name: '实操课',
				},
				{
					name: '模拟考试',
				},
			],
			actions2: [
				{
					name: '已安排'
				},
				{
					name: '进行中',
				},
				{
					name: '已取消',
				},
				{
					name: '已完成',
				},
				{
					name: '已满员',
				},
			],
			fileList1: [], //头像
			rules: {
				'userInfo.number': {
					type: 'string',
					required: true,
					message: '请输入车牌号',
					trigger: ['blur', 'change']
				},
			},
			show1: false,
			show2: false,
			value1: Number(new Date()),
			value2: Number(new Date()),
			userData: uni.getStorageSync('userData'), //获取用户信息
			courseId: 0,
			classHoursId: 0, 
		}
	},
	onLoad(o) {	
		this.courseId = o.courseId
		if(o.classHoursId){
			this.classHoursId = o.classHoursId
			this.getQueryClassHoursInfo(o.classHoursId)
		}
	},
	methods: {
		open(){
			this.$refs.calendar.open();
		},
		confirm3(e) {
			this.model1.userInfo.applyDate = e.fulldate
		},
		// 获取查询课时信息
		async getQueryClassHoursInfo(id){
			let res  = await queryClassHoursInfo(id)
			console.log(res, 1111);
			this.model1.userInfo = res
			if(res.state == 0){
				this.model1.userInfo.stateName = '已安排'
			} else if(res.state == 1){
				this.model1.userInfo.stateName = '进行中'
			} else if(res.state == 2){
				this.model1.userInfo.stateName = '已完成'
			} else if(res.state == 3){
				this.model1.userInfo.stateName = '已取消'
			} else if(res.state == 4){
				this.model1.userInfo.stateName = '已满员'
			}
		},
		sectionChange(index) {
			this.curNow = index;
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1.validate().then(async res => {
				console.log(this.userData, 6666);
				this.model1.userInfo.coachId = this.userData.user.coachId
				this.model1.userInfo.courseId = this.courseId
				if(this.model1.userInfo.stateName == '已安排'){
					this.model1.userInfo.stateName = 0
				} else if(this.model1.userInfo.stateName == '进行中'){
					this.model1.userInfo.state = 1
				} else if(this.model1.userInfo.stateName == '已完成'){
					this.model1.userInfo.state = 2
				} else if(this.model1.userInfo.stateName == '已取消'){
					this.model1.userInfo.state = 3
				} else if(this.model1.userInfo.stateName == '已满员'){
					this.model1.userInfo.state = 4
				}
				if(this.classHoursId){
					let data = await updateClassHours(this.model1.userInfo)
					if(data){
						uni.$u.toast('修改成功')
						uni.navigateTo({
							url: '/pages/classHour/classHour'
						});
					}
				} else {
					let data = await saveClassHours(this.model1.userInfo)
					if(data){
						uni.$u.toast('创建成功')
						uni.navigateTo({
							url: '/pages/classHour/classHour'
						});
					}
				}
				
				
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		sexSelect(e) {
			this.model1.userInfo.type = e.name
		},
		sexSelect2(e) {
			this.model1.userInfo.stateName = e.name
		},
		hideKeyboard() {
			uni.hideKeyboard()
		},
		hideKeyboard2() {
			uni.hideKeyboard()
		},
		showDatetimePicker() {
			this.show1 = true
		},
		showDatetimePicker2() {
			this.show2 = true
		},
		close() {
			this.show1 = false
		},
		cancel() {
			this.show1 = false
		},
		close2() {
			this.show2 = false
		},
		cancel2() {
			this.show2 = false
		},
		confirm(e) {
			this.show1 = false
			this.result(e.value, e.mode)
			console.log(e, 111);
		},
		confirm2(e) {
			this.show2 = false
			this.result2(e.value, e.mode)
			console.log(e, 222);
		},
		change(e) {
			// console.log('change', e)
		},
		result(time, mode) {
			console.log(mode, 333);
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
			switch (mode) {
				case 'datetime':
					return this.model1.userInfo.startTime = timeFormat(time, 'yyyy-mm-dd hh:MM')
				case 'date':
					return this.model1.userInfo.startTime = timeFormat(time, 'yyyy-mm-dd')
				case 'year-month':
					return this.model1.userInfo.startTime = timeFormat(time, 'yyyy-mm')
				case 'time':
					return this.model1.userInfo.startTime = time
				default:
					return ''
			}
		},
		result2(time, mode) {
			console.log(mode, 444);
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
			switch (mode) {
				case 'datetime':
					return this.model1.userInfo.endTime = timeFormat(time, 'yyyy-mm-dd hh:MM')
				case 'date':
					return this.model1.userInfo.endTime = timeFormat(time, 'yyyy-mm-dd')
				case 'year-month':
					return this.model1.userInfo.endTime = timeFormat(time, 'yyyy-mm')
				case 'time':
					return this.model1.userInfo.endTime = time
				default:
					return ''
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.login {
	.form_box {
		margin: 32rpx;

		.form_bo_wrap {

			.user {
				margin-bottom: 20rpx;
			}
		}
	}

	.enroll {
		font-size: $uni-font-size-mini;
		margin-top: 10rpx;
	}

	.forget {
		font-size: $uni-font-size-mini;
		color: $uni-color-type1;
		text-align: right;
		margin: 20rpx 0 20rpx;
	}

	.submit {
		margin: 32rpx 0 60rpx 0;
	}
}
</style>
